<template>
  <div>
    <!-- 渲染轮播图的组件 -->
    <el-carousel :interval="4000" type="card" height="360px">
      <el-carousel-item v-for="item in sliders" :key="item._id" >
        <img :src="item.url" style="width:100%;height:100%" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import * as types from '../store/action_type'

  export default {
    computed: {
      ...mapState(['sliders'])
    },
    methods: {
      ...mapActions([types.SET_SLIDER])
    },
    mounted() {
      if(!this.sliders.length) {
        this[types.SET_SLIDER]();
      }
    },
  }
</script>